<template>
  <div class="reset-password-page">
    <div class="reset-container box-radius">
      <div class="modal-header">
        <h3>重置密码</h3>
      </div>

      <div class="modal-body">
        <form class="login-form" @submit.prevent="handleSubmit" novalidate>
          <div class="form-item">
            <div class="password-input-wrapper">
              <input
                v-model="formData.password"
                :type="showPassword1 ? 'text' : 'password'"
                placeholder="新密码"
                required
                :class="{ error: errors.password }"
                @blur="validatePassword"
                @input="checkPasswordStrength"
              >
              <!-- 密码强度指示器 -->
              <div v-if="passwordStrength.show" class="password-strength">
                <div class="strength-bars">
                  <span
                    v-for="n in 3"
                    :key="n"
                    :class="['bar', { active: passwordStrength.level >= n }]"
                    :style="{ '--strength-color': passwordStrength.color }"
                  ></span>
                </div>
                <span class="strength-text" :style="{ color: passwordStrength.color }">
                  {{ passwordStrength.text }}
                </span>
              </div>
              <button
                type="button"
                class="toggle-password"
                @click="togglePassword(true)"
                :title="showPassword1 ? '隐藏密码' : '显示密码'"
              >
                <PhEyeSlash v-if="showPassword1" :size="16" />
                <PhEye v-else :size="16"/>
              </button>
            </div>
            <span v-if="errors.password" class="error-message">
              <i class="fas fa-exclamation-circle"></i>
              {{ errors.password }}
            </span>
          </div>

          <div class="form-item">
            <div class="password-input-wrapper">
              <input
                v-model="formData.confirmPassword"
                :type="showPassword2 ? 'text' : 'password'"
                placeholder="确认密码"
                required
                :class="{ error: errors.confirmPassword }"
                @blur="validateConfirmPassword"
              >
              <button
                type="button"
                class="toggle-password"
                @click="togglePassword(false)"
                :title="showPassword2 ? '隐藏密码' : '显示密码'"
              >
                <PhEyeSlash v-if="showPassword2" :size="16" />
                <PhEye v-else :size="16"/>
              </button>
            </div>
            <span v-if="errors.confirmPassword" class="error-message">
              <i class="fas fa-exclamation-circle"></i>
              {{ errors.confirmPassword }}
            </span>
          </div>

          <div class="form-tips">
            <p>请设置一个安全的新密码</p>
          </div>

          <button type="submit" class="submit-btn" :disabled="loading">
            {{ loading ? '重置中...' : '确认重置' }}
          </button>

          <div class="back-to-login">
            <button type="button" class="text-btn" @click="router.push('/')">
              返回首页
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { PhEye, PhEyeSlash } from '@phosphor-icons/vue';
import Message from '@/components/message';
import { resetPassword } from '@/api/portal';

const route = useRoute();
const router = useRouter();
const token = ref(route.query.token as string);

// 表单状态
const loading = ref(false);
const showPassword1 = ref(false);
const showPassword2 = ref(false);

const formData = reactive({
  password: '',
  confirmPassword: ''
});

const errors = reactive({
  password: '',
  confirmPassword: ''
});

// 密码强度相关
const passwordStrength = reactive({
  show: false,
  level: 0,
  text: '',
  color: ''
});

// 检查密码强度
const checkPasswordStrength = () => {
  const password = formData.password;
  passwordStrength.show = password.length > 0;

  if (password.length === 0) {
    passwordStrength.level = 0;
    passwordStrength.text = '';
    return;
  }

  let level = 0;
  if (password.length >= 6) level++;
  if (/[A-Z]/.test(password) && /[a-z]/.test(password)) level++;
  if (/[0-9]/.test(password)) level++;
  if (/[^A-Za-z0-9]/.test(password)) level++;

  passwordStrength.level = Math.min(level, 3);

  switch (passwordStrength.level) {
  case 1:
    passwordStrength.text = '弱';
    passwordStrength.color = '#ef4444';
    break;
  case 2:
    passwordStrength.text = '中';
    passwordStrength.color = '#f59e0b';
    break;
  case 3:
    passwordStrength.text = '强';
    passwordStrength.color = '#10b981';
    break;
  default:
    passwordStrength.text = '弱';
    passwordStrength.color = '#ef4444';
  }
};

// 切换密码显示/隐藏
const togglePassword = (isFirst: boolean) => {
  if (isFirst) {
    showPassword1.value = !showPassword1.value;
  } else {
    showPassword2.value = !showPassword2.value;
  }
};

// 验证密码
const validatePassword = () => {
  if (!formData.password) {
    errors.password = '请输入密码';
  } else if (formData.password.length < 6) {
    errors.password = '密码至少需要6个字符';
  } else if (passwordStrength.level < 2) {
    errors.password = '密码强度太弱，请包含大小写字母、数字或特殊字符';
  } else {
    errors.password = '';
  }
};

// 验证确认密码
const validateConfirmPassword = () => {
  if (!formData.confirmPassword) {
    errors.confirmPassword = '请确认密码';
  } else if (formData.confirmPassword !== formData.password) {
    errors.confirmPassword = '两次输入的密码不一致';
  } else {
    errors.confirmPassword = '';
  }
};

// 提交表单
const handleSubmit = async () => {
  validatePassword();
  validateConfirmPassword();

  if (errors.password || errors.confirmPassword) {
    return;
  }

  if (!token.value) {
    Message.error('重置链接无效');
    return;
  }

  loading.value = true;
  try {
    await resetPassword(token.value,formData.password);
    Message.success('重置成功');
    await router.push('/');
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.reset-password-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;

  .reset-container {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
  }
}

.modal-body {
  padding: 24px;

  .login-form {
    .form-item {
      position: relative;
      margin-bottom: 24px;

      .password-input-wrapper {
        position: relative;
        width: 100%;

        input {
          width: 100%;
          height: 40px;
          padding: 0 140px 0 12px; // 增加右侧 padding
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          font-size: 14px;
          transition: all 0.2s;
          box-sizing: border-box;

          /* 隐藏浏览器默认的密码显示/隐藏按钮 */
          &::-ms-reveal,
          &::-ms-clear {
            display: none;
          }
          &::-webkit-credentials-auto-fill-button {
            display: none !important;
          }
          &::-webkit-contacts-auto-fill-button {
            display: none !important;
          }
          &::-webkit-inner-spin-button,
          &::-webkit-outer-spin-button,
          &::-webkit-search-cancel-button,
          &::-webkit-search-decoration,
          &::-webkit-search-results-button,
          &::-webkit-search-results-decoration {
            -webkit-appearance: none;
            margin: 0;
          }

          &:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }

          &.error {
            border-color: #ef4444;
          }

          &::placeholder {
            color: #9ca3af;
          }
        }

        .password-strength {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          gap: 6px;
          pointer-events: none;
          min-width: 90px; // 设置最小宽度
          justify-content: flex-end; // 右对齐

          .strength-bars {
            display: flex;
            gap: 2px;

            .bar {
              width: 12px;
              height: 3px;
              background: #e2e8f0;
              border-radius: 1.5px;
              transition: all 0.3s ease;

              &.active {
                background: var(--strength-color);
              }
            }
          }

          .strength-text {
            font-size: 12px;
            min-width: 20px;
            transition: color 0.3s ease;
          }
        }

        .toggle-password {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          padding: 4px;
          color: #64748b;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1; // 确保在最上层

          &:hover {
            color: #1f2937;
          }
        }
      }

      .error-message {
        position: absolute;
        left: 0;
        bottom: -20px;
        font-size: 12px;
        color: #ef4444;
        display: flex;
        align-items: center;
        gap: 4px;
        opacity: 0;
        transform: translateY(-5px);
        animation: slideIn 0.3s ease forwards;

        i {
          font-size: 14px;
        }
      }
    }

    .form-tips {
      margin-bottom: 16px;
      padding: 12px;
      background: #f3f4f6;
      border-radius: 6px;

      p {
        margin: 0;
        font-size: 13px;
        color: #6b7280;
      }
    }

    .submit-btn {
      width: 100%;
      padding: 10px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover:not(:disabled) {
        background: #2563eb;
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }

    .back-to-login {
      margin-top: 16px;
      text-align: center;

      .text-btn {
        background: none;
        border: none;
        padding: 0;
        color: #3b82f6;
        font-size: 14px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #2563eb;
        }
      }
    }
  }
}

// 深色模式
@media (prefers-color-scheme: dark) {
  .reset-password-page {
    background-color: #111827;

    .reset-container {
      background: #1f2937;
    }
  }

  .modal-header {
    border-bottom-color: #374151;

    h3 {
      color: #f3f4f6;
    }
  }

  .modal-body {
    .login-form {
      .form-item {
        input {
          background: #374151;
          border-color: #4b5563;
          color: #f3f4f6;

          &:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
          }

          &::placeholder {
            color: #9ca3af;
          }

          &.error {
            border-color: #f87171;
          }
        }

        .toggle-password {
          color: #9ca3af;

          &:hover {
            color: #d1d5db;
          }
        }

        .password-strength {
          .bar {
            background: #4b5563;
          }
        }
      }

      .form-tips {
        background: #374151;

        p {
          color: #9ca3af;
        }
      }

      .text-btn {
        color: #60a5fa;

        &:hover {
          color: #93c5fd;
        }
      }
    }
  }
}

// 动画
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式
@media screen and (max-width: 640px) {
  .reset-password-page {
    padding: 16px;
  }

  .modal-header {
    padding: 16px 20px;
  }

  .modal-body {
    padding: 20px;
  }
}
</style>
